<template>
	<view v-if="orderinfo">
		<block v-if="flag == 'on'">
			<view class="titile1">
				微信安全支付
			</view>
			<view class="titile2">
				<text style="font-size: 28rpx;">￥</text>
				<text style="font-size: 52rpx;">{{ orderinfo.price }}</text>
			</view>
			<view class="title3">
				<view class="left">
					收款方
				</view>
				<view class="right">
					微信支付商户
				</view>
			</view>
			<view class="pay" @tap="againOrderPay">
				立即支付
			</view>
		</block>
		<block v-if="flag == 'off'">
			<view class="success_img">
				<image src="../../static/success.png" mode=""></image>
			</view>
			<view class="success_text">
				付款成功，请返回原页面
			</view>
		</block>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				order_id: '',
				orderinfo: '',
				flag: 'on'
			}
		},
		onLoad(options) {
			console.log(options, '??')
			console.log(this.flag, '?11')
			this.order_id = options.order_id
		},
		onShow() {
			this.submit()
		},
		methods: {
			againOrderPay() {
				let that = this
				this.$http.Post('order/againOrderPay', {
					order_id: this.order_id
				}, (result) => {
					let paymentInfo = result.data
					uni.requestPayment({
						provider: "wxpay",
						timeStamp: paymentInfo.timeStamp,
						nonceStr: paymentInfo.nonceStr,
						package: paymentInfo.package,
						signType: paymentInfo.signType,
						paySign: paymentInfo.paySign,
						success(res) {
							uni.showToast({
								title: "支付成功"
							});
							that.flag = 'off'
						},
						fail(err) {
							uni.showToast({
								title: "支付失败",
								icon: 'error'
							});
						},
					});
				})
			},
			submit() { //授权登录\
				uni.showLoading({
					title: '正在登录'
				})
				uni.login({
					success: (res) => {
						let code = res.code
						this.$http.Post('user/codes', {
							code: code,
							order_id: this.order_id
						}, (result) => {
							uni.hideLoading()
							if (result.code == 1) {
								uni.setStorageSync('token', result.data.userinfo.token)
								uni.setStorageSync('userinfo', result.data.userinfo)
								this.getlianjie()
							}
						})
					}
				})
			},
			getlianjie() { //
				uni.showLoading({
					title: '正在加载'
				})
				this.$http.Post('order/orderInfo', {
					order_id: this.order_id
				}, (result) => {
					uni.hideLoading()
					this.orderinfo = result.data
				})
			},
		}
	}
</script>

<style>
	.titile1 {
		width: 100%;
		margin: 40rpx auto;
		text-align: center;
		font-size: 30rpx;
	}

	.titile2 {
		width: 100%;
		margin: 20rpx auto;
		text-align: center;
	}

	.title3 {
		width: 100%;
		height: 80rpx;
		display: flex;
		align-items: center;
		justify-content: space-between;
		background-color: #fff;
		font-size: 26rpx;
		margin: 40rpx auto 20rpx auto;
	}

	.left {
		padding-left: 35rpx;
		color: #999;
	}

	.right {
		padding-right: 35rpx;
		color: #333;
	}

	.pay {
		width: 96%;
		height: 80rpx;
		display: flex;
		justify-content: center;
		align-items: center;
		margin: 60rpx auto 20rpx auto;
		color: #fff;
		font-size: 28rpx;
		border-radius: 10rpx;
		background-color: #07c261;
	}

	.success_img {
		width: 100%;
		height: 400rpx;
		display: flex;
		justify-content: center;
		align-items: center;
	}

	.success_img>image {
		width: 180rpx;
		height: 180rpx;
	}

	.success_text {
		text-align: center;
		font-size: 28rpx;
		color: #333;
	}
</style>